<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    
    .container{
      width:100%;
      grid-row-gap: 20px;
      grid-column-gap: 20px;
      display:grid;      /*grid布局*/
      grid-template-columns:1fr  1fr;  /*设置列*/
    }
    .d{
        border:4px solid blue;
    }
    .item{
        width: 100%;
        border:1px solid #ffaaff;
        height:60px;
        font-size: 16px;
        line-height: 30px;
        display:grid;
        grid-template-columns:200px auto;
    }
    .desc{
        border:1px solid #ffaa11;
        overflow: hidden; 
        word-wrap: break-word;
        grid-column: 2 / 3;
        grid-row: 1 / 3;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    a:hover {
      color: inherit;
      text-decoration: none;
    }

    a:visited {
      color: inherit;
      text-decoration: none;
    }

    a:active {
      color: inherit;
      text-decoration: none;
    }

</style>

<body>
    <input id="setVal" type="text"/> <button onclick="setValue()">设置值</button> <button onclick="copyValue()">复制值</button> <button onclick="storage()">存储</button><button onclick="clearStorage()">清空存储</button>

 <div class="container">
    <div class="d" id="feature">
        
    </div>
    <div class="d" id="past">

    </div>
 </div>
 

    <script type="text/javascript">
        var dataDefault = [];
        /*
                // 数据存储 
                localStorage.setItem("daojishi","value");
                // 数据读取
                localStorage.getItem("daojishi");
                // 数据删除
                localStorage.removeItem("daojishi");
                //清空localStorage
                localStorage.clear()
        */

        var daojishi = localStorage.getItem("daojishi");
        if(daojishi){
            dataDefault = dataDefault ||[];
            dataDefault.push(...JSON.parse(daojishi));
        }

        function storage(){
            localStorage.setItem("daojishi",JSON.stringify(dataDefault));
        }
        function clearStorage(){
            localStorage.removeItem("daojishi");
        }

        function setValue(){
            var value = document.getElementById("setVal").value;
            dataDefault.push(...JSON.parse(value));
            setHtml()
        }

        function copyValue(){
            var input = document.getElementById("setVal");
            input.value = JSON.stringify(dataDefault);
            input.select();
            document.execCommand('copy');
        }
        function addsetInterval(item,obj_,time_){
            var countDownDate = new Date(time_).getTime();
             // 每秒更新倒计时
            var timer = setInterval(function () {
                // 获取当前时间
                var now = new Date().getTime();
                // 计算距离目标日期的时间差
                var distance = countDownDate - now;
                // 计算天、小时、分钟和秒
                var days = Math.floor(distance / (1000 * 60 * 60 * 24));
                var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((distance % (1000 * 60)) / 1000);
                // 将时间输出到页面上
                obj_.innerHTML = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
                // 如果距离目标日期已经过去了，则停止倒计时
                if (distance < 0) {
                    clearInterval(timer);
                    obj_.innerHTML = "已到！";
                    var past = document.getElementById('past');
                    past.appendChild(item);
                }
            }, 1000);
        }
        function clear(){
            document.getElementById('feature').innerHTML="";
            document.getElementById('past').innerHTML="";
        }
        function setHtml(){
            var data = getData();
            if(data){
                clear();
            }
            var len = data.length;
            for (var i = 0; i < len; i++) {
                setItem(data[i]);
            }
        }

        function setItem(d){
            var item = document.createElement('div');
            item.setAttribute('class', 'item');

            var a = document.createElement('a');
            a.setAttribute('href', d.url);
            a.setAttribute('target', "_blank");
            
            var a1 = document.createElement('a');
            a1.setAttribute('href', d.url);
            a1.setAttribute('target', "_blank");
            a1.innerHTML = d.time;


            var span = document.createElement('span');
            span.setAttribute('class', 'desc');
            span.innerHTML = d.desc;

            
            item.appendChild(a1);
            item.appendChild(a);
            item.appendChild(span);

            var feature = document.getElementById('feature');
            feature.appendChild(item);

            addsetInterval(item,a,d.time);
        }

        function getData(){
            var data = dataDefault;
            // 排序
            var dataSort = selectionSort(data);
            return dataSort;
        }

        function selectionSort(arr) {
            var len = arr.length;
            var minIndex, temp;
            for (var i = 0; i < len - 1; i++) {
                minIndex = i;
                for (var j = i + 1; j < len; j++) {
                    if (arr[j]['time'] < arr[minIndex]['time']) {     // 寻找最小的数
                        minIndex = j;                 // 将最小数的索引保存
                    }
                }
                temp = arr[i];
                arr[i] = arr[minIndex];
                arr[minIndex] = temp;
            }
            return arr;
        }


        setHtml();
    </script>
</body>

</html>